<template>
    <div>
        <!-- 修改弹窗显示 -->
        <el-dialog v-model="props.updateDialog" title="修改菜单" draggable width="50%" @close="handleClose" class="dialogs"
            @open="handleOpenCardDialog">
            <el-form :model="props.form" :rules="rules" ref="ruleFormRef" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="上级菜单" :class="{ 'bold-label': true }">
                            <el-tree-select v-model="form.parentId" :data="props.treeData" check-strictly
                                node-key="menuId" :props="{ label: 'menuName', children: 'children' }"
                                placeholder="请选择上级菜单" :render-after-expand="false" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="菜单类型" :class="{ 'bold-label': true }">
                            <el-radio-group v-model="form.menuType">
                                <el-radio value="C">目录</el-radio>
                                <el-radio value="M">菜单</el-radio>
                                <el-radio value="F">功能</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="菜单图标" :class="{ 'bold-label': true }">
                            <el-tooltip placement="bottom-start" trigger="click" effect="light"
                                :visible="tooltipVisible">
                                <el-input v-model="form.icon" :prefix-icon="form.icon" readonly placeholder="点此选择图标"
                                    @click="toggleTooltip" />
                                <template #content>
                                    <div style="width:360px;height: 190px;padding: 12px;">
                                        <el-input v-model="IconInput" style="width: 360px;margin-bottom: 10px;"
                                            @input="Iconfind" placeholder="请输入图标名称" :suffix-icon="Search">
                                        </el-input>
                                        <div style="display: flex; flex-wrap: wrap;">
                                            <div class="row" v-for="item in Icondata" @click="selectIcon(item)"
                                                :key="item.id">
                                                <component :is="item.iconUrl" style="width: 15px;" />
                                                {{ item.name }}
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="菜单名称" :class="{ 'bold-label': true }" prop="menuName">
                            <el-input v-model="form.menuName" placeholder="请输入菜单名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="英文名称" :class="{ 'bold-label': true }" prop="ename">
                            <el-input v-model="form.ename" placeholder="请输入英文名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="路由地址" v-if="form.menuType === 'C' || form.menuType === 'M'"
                            :class="{ 'bold-label': true }" prop="path">
                            <el-input v-model="form.path" placeholder="请输入路由地址"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="组件路径" v-if="form.menuType === 'M'" :class="{ 'bold-label': true }">
                            <el-input v-model="form.component" placeholder="请输入组件路径"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="权限字符" v-if="form.menuType === 'M' || form.menuType === 'F'"
                            :class="{ 'bold-label': true }">
                            <el-input v-model="form.perms" placeholder="请输入权限字符"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="显示排序" :class="{ 'bold-label': true }" prop="orderNum">
                            <el-input-number v-model="form.orderNum" :min="0" controls-position="right" size="large">
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="显示状态" v-if="form.menuType === 'C' || form.menuType === 'M'"
                            :class="{ 'bold-label': true }">
                            <el-radio-group v-model="form.visible">
                                <el-radio value="0">显示</el-radio>
                                <el-radio value="1">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单状态" v-if="form.menuType === 'C' || form.menuType === 'M'"
                            :class="{ 'bold-label': true }">
                            <el-radio-group v-model="form.status">
                                <el-radio value="0">正常</el-radio>
                                <el-radio value="1">停用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleSubmitUpdate(ruleFormRef)">确定</el-button>
                    <el-button @click="handleClose">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import { updateMenu, findIconList, findMenuList } from '@/apis/lth/index'
const emit = defineEmits(['close-dialog'])
const tooltipVisible = ref(false); //图标弹窗显示

const Icondata = ref([])
const treeData = ref([])
onMounted(async () => {
    Icondata.value = await findIconList();//修改时查询的图标列表
    treeData.value = await findMenuList();//修改时查询的菜单列表
})

const props = defineProps(['updateDialog', 'form', 'treeData'])
const ruleFormRef = ref()

const rules = {
    menuName: [
        { required: true, message: "菜单名称不能为空", trigger: "blur" }
    ],
    ename: [
        { required: true, message: "英文名称不能为空", trigger: "blur" }
    ],
    orderNum: [
        { required: true, message: "菜单顺序不能为空", trigger: "blur" }
    ],
    path: [
        { required: true, message: "路由地址不能为空", trigger: "blur" }
    ]
}

const handleOpenCardDialog = () => {
    nextTick(() => {
        //清空校验
        ruleFormRef.value.clearValidate()
    })
}

const toggleTooltip = () => {
    tooltipVisible.value = !tooltipVisible.value;
};

let IconInput = ref([])//图标搜索
//点击
const selectIcon = (aicon) => {
    props.form.name = aicon.name
    props.form.icon = aicon.iconUrl
    console.log(props.form)
    tooltipVisible.value = false; //关闭图标弹窗
}

let Iconfind = async (r) => {//图标搜索查询
    Icondata.value = await findIconList(r);
}
/**
 * 修改菜单，数据提交
 */
const handleSubmitUpdate = async (value) => {
    value.validate(valid => {
        if (valid) {
            console.log(props.form)
            updateMenu(props.form)
            emit('close-dialog')
            ElMessage.success(`修改成功`)
        } else {
            ElMessage.error("请根据提示填写完表单")
        }
    })
}

//关闭事件
const handleClose = async () => {
    IconInput.value = undefined
    Icondata.value = await findIconList();
    tooltipVisible.value = false
    emit('close-dialog')
}
</script>

<style scoped>
::v-deep .dialogs {
    padding: 30px 20px
}

.row {
    width: 120px;
}
</style>
